<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="col-lg-3 col-xs-offset-4">
<div class="row">
<nav class="navbar navbar-default">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-list"></span>通讯录</a>
<ul class="dropdown-menu">
    <li><a href="#">添加</a></li>
    <li><a href="#">列表</a></li>
    </ul>
        </li>
        </ul>
        </nav>
        </div>
        <div class="row">
        <div class="panel panel-default">
        
	<div class="panel-heading">
	<div class="panel-title">
		编辑李小小
</div>
</div>
<form class="form-horizontal">
<br />
				<div class="form-group">
				<label for="a" class="col-xs-3 control-label">姓名</label>
				    <div class="col-xs-8">
				        <input  class="form-control" placeholder="李小小"/>
				            </div>
				            </div>
				            <div class="form-group">
				            <label for="b" class="col-xs-3 control-label">手机</label>
				                <div class="col-xs-8">
				                <div class="input-group">
				                <input id="b" class="form-control"placeholder="1392141432"/>
						<span class="input-group-btn">
						<a class="btn btn-default"  data-toggle="modal"  data-target="#m"><span>删除</span></a>
						</span>
						</div>
						</div>
						    </div>
						    <div class="form-group">
						    <label for="c" class="col-xs-3 control-label">QQ</label>
						    <div class="col-xs-8">
						    <div class="input-group">
						    <input id="c" class="form-control"placeholder="4324343"/>
						    <span class="input-group-addon">
						    <span>删除</span>
						    </span>
						    </div>
						        </div>
						</div>
						            <div class="form-group">
						            <label class="col-xs-3 control-label">添加</label>
						            <div class="col-xs-9">
						            <a  data-toggle="modal" data-target="#n"><button class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button></a>
						                </div>
						                </div>
						                <div class="form-group">
						                <label class="col-xs-3 control-label"></label>
						                <div class="col-xs-9">
						                <button class="btn btn-primary">确定</button>
						                <button class="btn btn-default">取消</button>
						                </div>
	</form>
	</div>
	</div>


	<div class="modal" id="m">
	<div class="modal-dialog">
	<div class="modal-content">
	    <div class="modal-header">
					   <div class="modal-title">删除确认</div>
					   </div>
					       <div class="modal-body">确认删除 手机号：1392141432？</div>
					       <div class="modal-footer" >
					       <button class="btn btn-primary">确定</button>
						<button class="btn btn-default">取消</button>
						</div>
						</div>
						</div>
						</div>


						<div class="modal" id="n">
						<div class="modal-dialog">
						<div class="modal-content">
						<div class="modal-header">
					   <div class="modal-title">添加条目</div>
					       </div>
					       <div class="modal-body">
					       <form class="form-horizontal">
					       <div class="form-group">
					           <label for="a" class="col-xs-3 control-label">类型</label>
					           <div class="col-xs-9">
					           <div class="input-group">
					           <input  class="form-control" placeholder="手机号"></input>
					               <span class="input-group-addon">
					                   <div class="dropdown">
					                   <button  data-toggle="dropdown"><span class="caret"></span></button>
					                   </div>
					                   </span>
					                   </div>
				</div>
</div>
<div class="form-group">
				<label for="a" class="col-xs-3 control-label">内容</label>
				<div class="col-xs-9">
					    <input  class="form-control"/>
                        </div>
				</div>
		 </form>
  					 </div>
				   <div class="modal-footer" >
					   <button class="btn btn-primary">确定</button>
						<button class="btn btn-default">取消</button>
				   	</div>
   				</div>
   		</div>
	</div>
   </body>
</html>